<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" id="viewportid" content="target-densitydpi,width=640,user-scalable=no,maximum-scale=1.2">
    <title>swiper</title>
    <link href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        img {
            border: none;
            vertical-align: middle;
        }
        html,body {
            height: 100%;
            margin: 0 auto;
            max-width: 640px;
            background-color: #eaeaee;
        }
        .swiper-container{
            width: 640px;
            height: 100%;
        }
        .swiper-slide{
            text-align: center;
            font-size: 18px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            position: relative;
        }
        .resize {
            position: absolute;
            bottom: 20px;
            margin-left: auto;
            margin-right: auto;
        }
        .con {
            position: absolute;
            left: 30%;
            top: 466px;
        }
    </style>
    <!--引入swiper.animate.min-->
    <script>
        //本插件由www.swiper.com.cn提供
        function swiperAnimateCache(){for(allBoxes=window.document.documentElement.querySelectorAll(".ani"),i=0;i<allBoxes.length;i++)allBoxes[i].attributes["style"]?allBoxes[i].setAttribute("swiper-animate-style-cache",allBoxes[i].attributes["style"].value):allBoxes[i].setAttribute("swiper-animate-style-cache"," "),allBoxes[i].style.visibility="hidden"}function swiperAnimate(a){clearSwiperAnimate();var b=a.slides[a.activeIndex].querySelectorAll(".ani");for(i=0;i<b.length;i++)b[i].style.visibility="visible",effect=b[i].attributes["swiper-animate-effect"]?b[i].attributes["swiper-animate-effect"].value:"",b[i].className=b[i].className+"  "+effect+" "+"animated",style=b[i].attributes["style"].value,duration=b[i].attributes["swiper-animate-duration"]?b[i].attributes["swiper-animate-duration"].value:"",duration&&(style=style+"animation-duration:"+duration+";-webkit-animation-duration:"+duration+";"),delay=b[i].attributes["swiper-animate-delay"]?b[i].attributes["swiper-animate-delay"].value:"",delay&&(style=style+"animation-delay:"+delay+";-webkit-animation-delay:"+delay+";"),b[i].setAttribute("style",style)}function clearSwiperAnimate(){for(allBoxes=window.document.documentElement.querySelectorAll(".ani"),i=0;i<allBoxes.length;i++)allBoxes[i].attributes["swiper-animate-style-cache"]&&allBoxes[i].setAttribute("style",allBoxes[i].attributes["swiper-animate-style-cache"].value),allBoxes[i].style.visibility="hidden",allBoxes[i].className=allBoxes[i].className.replace("animated"," "),allBoxes[i].attributes["swiper-animate-effect"]&&(effect=allBoxes[i].attributes["swiper-animate-effect"].value,allBoxes[i].className=allBoxes[i].className.replace(effect," "))}
    </script>
    <!--引入结束-->
</head>
<body style="background: rgb(0, 0, 0);">
<div class="swiper-container">
    <div class="swiper-wrapper">
        <!--page 1-->
        <div class="swiper-slide slider1">
            <div class="resize ani animated infinite" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.3s" swiper-animate-delay="0.5s">
                <img src="http://img1.gtimg.com/autoguangzhou/pics/hv1/149/210/200/13058699.png"></div>
            <div>
                <img src="http://img1.gtimg.com/autoguangzhou/pics/hv1/151/210/200/13058701.png" />
            </div>
        </div>
        <!--page 2-->
        <div class="swiper-slide slider2">
            <div class="resize ani animated infinite" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.3s" swiper-animate-delay="0.3s">
                <img src="http://img1.gtimg.com/autoguangzhou/pics/hv1/149/210/200/13058699.png" ></div>
            <div>
                <img src="http://img1.gtimg.com/autoguangzhou/pics/hv1/71/239/200/13066016.png" />
            </div>
            <!--<div class="ani con" swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.3s">-->
                <!--<img src="http://img1.gtimg.com/autoguangzhou/pics/hv1/71/239/200/13066016.png" alt="" width="250px" height="250px">-->
            <!--</div>-->
        </div>
        <!--page 3-->
        <div class="swiper-slide slider3">
            <div>
                <img src="http://img1.gtimg.com/autoguangzhou/pics/hv1/153/210/200/13058703.png" />
            </div>
        </div>
    </div>
</div>
<script>
    var mySwiper = new Swiper ('.swiper-container', {
        direction: 'vertical',
        onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
            swiperAnimateCache(swiper); //隐藏动画元素
            swiperAnimate(swiper); //初始化完成开始动画
        },
        onSlideChangeEnd: function(swiper){
            swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
        }
    });
</script>
<!--微信分享 开始-->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    wx.onMenuShareAppMessage({
        title: '全新swiper来袭了', // 分享标题
        desc: '这是一个神奇得网站,点击他他就会调转', // 分享描述
        link: window.location.href, // 分享链接
        imgUrl: 'http://img.zcool.cn/community/01bb89573d8b9f32f8757cb92135ae.png', // 分享图标
        type: '', // 分享类型,music、video或link，不填默认为link
        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
        success: function () {
            // 用户确认分享后执行的回调函数
            alert('分享成功')
        },
        cancel: function () {
            // 用户取消分享后执行的回调函数
            alert('您已取消分享')
        }
    });
</script>
<!--微信分享 结束-->
</body>
</html>